{extend name="public/admin_base" /}

{block name="head"}<link rel="stylesheet" href="/static/admin/css/other/console2.css" />{/block}
{block name="body"}
	<div class="layui-row layui-col-space10">
		<div class="layui-col-md8">
			<div class="layui-row layui-col-space10">

				<div class="layui-col-md12">
					<div class="layui-card">
						<div class="layui-card-header"><i class="layui-icon layui-icon-voice"></i><a href="{:url('system.upgrade/index')}" id="up_version" lay-href="{:url('system.upgrade/index')}"></a></div>
					</div>
				</div>

				<!-- 快捷菜单 -->
				<div class="layui-col-md6">
					<div class="layui-card">
						<div class="layui-card-header">
							快捷菜单
						</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space10">
								<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
									<div class="pear-card" data-id="home1" data-title="主页"
										data-url="http://www.baidu.com">
										<i class="layui-icon layui-icon-home"></i>
									</div>
									<span class="pear-card-title">主页</span>
								</div>
								<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
									<div class="pear-card" data-id="home2" data-title="弹层"
										data-url="http://www.baidu.com">
										<i class="layui-icon layui-icon-camera"></i>
									</div>
									<span class="pear-card-title">弹层</span>
								</div>
								<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
									<div class="pear-card" data-id="home2" data-title="聊天"
										data-url="http://www.baidu.com">
										<i class="layui-icon layui-icon-star"></i>
									</div>
									<span class="pear-card-title">聊天</span>
								</div>
								<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
									<div class="pear-card" data-id="home3" data-title="相机"
										data-url="http://www.baidu.com">
										<i class="layui-icon layui-icon-camera"></i>
									</div>
									<span class="pear-card-title">相机</span>
								</div>
								<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
									<div class="pear-card" data-id="home4" data-title="表单"
										data-url="http://www.baidu.com">
										<i class="layui-icon layui-icon-console"></i>
									</div>
									<span class="pear-card-title">表单</span>
								</div>
								<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
									<div class="pear-card" data-id="home5" data-title="安全"
										data-url="http://www.baidu.com">
										<i class="layui-icon layui-icon-auz"></i>
									</div>
									<span class="pear-card-title">安全</span>
								</div>
								<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
									<div class="pear-card" data-id="home6" data-title="公告"
										data-url="http://www.baidu.com">
										<i class="layui-icon layui-icon-cart"></i>
									</div>
									<span class="pear-card-title">公告</span>
								</div>
								<div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
									<div class="pear-card" data-id="home7" data-title="更多"
										data-url="http://www.baidu.com">
										<i class="layui-icon layui-icon-app"></i>
									</div>
									<span class="pear-card-title">更多</span>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<!-- 代办任务 -->
				<div class="layui-col-md6">
					<div class="layui-card">
						<div class="layui-card-header">
							代办任务
						</div>
						<div class="layui-card-body">
							<div class="layui-row layui-col-space10">
								<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
									<div class="pear-card2">
										<div class="title">待审评论</div>
										<div class="count pear-text">{$pendComms}</div>
									</div>
								</div>
								<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
									<div class="pear-card2">
										<div class="title">待审帖子</div>
										<div class="count pear-text">{$pendForums}</div>
									</div>
								</div>
								<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
									<div class="pear-card2">
										<div class="title">待审文章</div>
										<div class="count pear-text">0</div>
									</div>
								</div>
								<div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
									<div class="pear-card2">
										<div class="title">待审用户</div>
										<div class="count pear-text">{$pendUser}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="layui-col-md12">
					<div class="layui-card">
						<div class="layui-card-body">
							<div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
								<div id="echarts-records" style="background-color:#ffffff;min-height:400px;"></div>
							</div>
						</div>
					</div>
					<!-- <div class="layui-card">
						<div class="layui-card-header">
							使用记录
						</div>
						<div class="layui-card-body">
							<table id="role-table" lay-filter="role-table"></table>
						</div>
					</div> -->
				</div>
			</div>
		</div>
		<div class="layui-col-md4">
			<div class="layui-card">
				<div class="layui-card-header">留言板</div>
				<div class="layui-card-body">
					<ul class="pear-card-status">
						{volist name="comments" id="vo"}
						<li>
							<p>{$vo.content|raw}</p>
							<span>{$vo.create_time}</span>
							<a href="{$vo.url}" data-id="{$vo.id}" target="_blank" class="pear-btn pear-btn-primary pear-btn-xs pear-reply">回复</a>
						</li>
						{/volist}
					</ul>
				</div>
			</div>
		</div>
	</div>
{/block}		

{block name="js"}
	<script>
		layui.use(['layer', 'echarts', 'carousel', 'element', 'table'], function() {
			var $ = layui.jquery,
				layer = layui.layer,
				element = layui.element,
				table = layui.table,
				carousel = layui.carousel;
				let echarts = layui.echarts;
			let cols = [
				[{
						type: 'checkbox'
					},
					{
						title: '角色名',
						field: 'roleName',
						align: 'center',
						width: 100
					},
					{
						title: 'Key值',
						field: 'roleCode',
						align: 'center'
					},
					{
						title: '描述',
						field: 'details',
						align: 'center'
					},
					{
						title: '是否可用',
						field: 'enable',
						align: 'center',
						templet: '#role-enable'
					}
				]
			]

			table.render({
				elem: '#role-table',
				url: '/static/admin/data/role.json',
				page: true,
				cols: cols,
				skin: 'line'
			});


			var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

			$("body").on("click", "[data-url]", function() {
				parent.layui.tab.addTabOnlyByElem("content", {
					id: $(this).attr("data-id"),
					title: $(this).attr("data-title"),
					url: $(this).attr("data-url"),
					close: true
				})
			})


			let bgColor = "#fff";
			let color = [
				"#0090FF",
				"#36CE9E",
				"#FFC005",
				"#FF515A",
				"#8B5CFF",
				"#00CA69"
			];
			let echartData = [{
					name: "1",
					value1: 100,
					value2: 233
				},
				{
					name: "2",
					value1: 138,
					value2: 233
				},
				{
					name: "3",
					value1: 350,
					value2: 200
				},
				{
					name: "4",
					value1: 173,
					value2: 180
				},
				{
					name: "5",
					value1: 180,
					value2: 199
				},
				{
					name: "6",
					value1: 150,
					value2: 233
				},
				{
					name: "7",
					value1: 180,
					value2: 210
				},
				{
					name: "8",
					value1: 230,
					value2: 180
				}
			];

			let xAxisData = echartData.map(v => v.name);
			//  ["1", "2", "3", "4", "5", "6", "7", "8"]
			let yAxisData1 = echartData.map(v => v.value1);
			// [100, 138, 350, 173, 180, 150, 180, 230]
			let yAxisData2 = echartData.map(v => v.value2);
			// [233, 233, 200, 180, 199, 233, 210, 180]
			const hexToRgba = (hex, opacity) => {
				let rgbaColor = "";
				let reg = /^#[\da-f]{6}$/i;
				if (reg.test(hex)) {
					rgbaColor =
						`rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
						"0x" + hex.slice(3, 5)
					)},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
				}
				return rgbaColor;
			}

			option = {
				backgroundColor: bgColor,
				color: color,
				legend: {
					right: 10,
					top: 10
				},
				tooltip: {
					trigger: "axis",
					formatter: function(params) {
						let html = '';
						params.forEach(v => {
							html +=
								`<div style="color: #666;font-size: 14px;line-height: 24px">
								<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
								${v.seriesName}.${v.name}
								<span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
								万元`;
						})
						return html
					},
					extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
					axisPointer: {
						type: 'shadow',
						shadowStyle: {
							color: '#ffffff',
							shadowColor: 'rgba(225,225,225,1)',
							shadowBlur: 5
						}
					}
				},
				grid: {
					top: 100,
					containLabel: true
				},
				xAxis: [{
					type: "category",
					boundaryGap: false,
					axisLabel: {
						formatter: '{value}月',
						textStyle: {
							color: "#333"
						}
					},
					axisLine: {
						lineStyle: {
							color: "#D9D9D9"
						}
					},
					data: xAxisData
				}],
				yAxis: [{
					type: "value",
					name: '单位：万千瓦时',
					axisLabel: {
						textStyle: {
							color: "#666"
						}
					},
					nameTextStyle: {
						color: "#666",
						fontSize: 12,
						lineHeight: 40
					},
					splitLine: {
						lineStyle: {
							type: "dashed",
							color: "#E9E9E9"
						}
					},
					axisLine: {
						show: false
					},
					axisTick: {
						show: false
					}
				}],
				series: [{
					name: "2018",
					type: "line",
					smooth: true,
					symbolSize: 8,
					zlevel: 3,
					lineStyle: {
						normal: {
							color: color[0],
							shadowBlur: 3,
							shadowColor: hexToRgba(color[0], 0.5),
							shadowOffsetY: 8
						}
					},
					areaStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[{
										offset: 0,
										color: hexToRgba(color[0], 0.3)
									},
									{
										offset: 1,
										color: hexToRgba(color[0], 0.1)
									}
								],
								false
							),
							shadowColor: hexToRgba(color[0], 0.1),
							shadowBlur: 10
						}
					},
					data: yAxisData1
				}, {
					name: "2019",
					type: "line",
					smooth: true,
					symbolSize: 8,
					zlevel: 3,
					lineStyle: {
						normal: {
							color: color[1],
							shadowBlur: 3,
							shadowColor: hexToRgba(color[1], 0.5),
							shadowOffsetY: 8
						}
					},
					areaStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[{
										offset: 0,
										color: hexToRgba(color[1], 0.3)
									},
									{
										offset: 1,
										color: hexToRgba(color[1], 0.1)
									}
								],
								false
							),
							shadowColor: hexToRgba(color[1], 0.1),
							shadowBlur: 10
						}
					},
					data: yAxisData2
				}]
			};

			echartsRecords.setOption(option);

			window.onresize = function() {
				echartsRecords.resize();
			};

			//加载版本检测
			(function(){
				$.get("{:url('Index/sysUpgradeCheck')}",function(data){
					$('#up_version').html(data);
				})
			})();

		});

	</script>
{/block}
